import React from 'react'
import {ShowLoading} from '@/components'
import {ActivityIndicator, Card, Tag, WhiteSpace} from 'antd-mobile'
import {BsBrush, BsTrash} from 'react-icons/all'
import {history} from 'umi'
import {timer} from '@/utils'

export default function Lists(props) {
  return (
    <div>
      {!(props?.persons?.length || !props.loading) ?
        <ActivityIndicator toast/> :
        <div>
          {props?.persons?.length ? props.persons.map(item =>
            <div key={item.id}>
              <WhiteSpace size="lg"/>
              <Card full>
                <Card.Header
                  title={<div>{item.name}{item.isMy && <Tag selected>我</Tag>}</div>}
                  thumb={require('@/assets/user.png')}
                  thumbStyle={{height: '30px', width: '30px'}}
                />
                <Card.Body>
                  <div>身份证号：{item.No}</div>
                </Card.Body>
                <Card.Footer
                  content={<div>
                    <BsBrush onClick={() => {
                      history.push({
                        pathname: '/user/personEdit',
                        query: {
                          id: item.id
                        }
                      })
                    }}/>
                    <BsTrash onClick={() => {
                      props.handleDelete(item.id)
                    }}/>
                  </div>}
                  extra={<div>{timer(item.createdAt)}</div>}/>
              </Card>
            </div>
          ) : ''}
        </div>
      }
      <ShowLoading showLoading={props?.showLoading}/>
    </div>
  )
}
